<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title>口语练习</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css?v=1" />
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2353733_1ezg0kur2cb.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
    <script src="js/config.js"></script>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/axios-config.js?v=4"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/component.js?v=78"></script>
    <script src="js/navbar-component.js?v=2"></script>
    <script src="js/vue/vue-router.js"></script>
    <script src="js/srt.js?v=7"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
        body{
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
    </style>
    <style>
        .box{
            width: 100px;
            text-align: center;
            position: absolute;
            top: 70%;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .box .main{
            margin-left: 10px;
        }
        @-webkit-keyframes list
        {
        0% {
            -webkit-transform: scaley(1);
                    transform: scaley(1); }

        50% {
            -webkit-transform: scaley(0.4);
                    transform: scaley(0.4);
            }
        100% {
            -webkit-transform: scaley(1);
                    transform: scaley(1); 
                    } 
            }
        @keyframes list
        {
        0% {
            -webkit-transform: scaley(1);
                    transform: scaley(1); }

        50% {
            -webkit-transform: scaley(0.4);
                    transform: scaley(0.4); }

        100% {
            -webkit-transform: scaley(1);
                    transform: scaley(1); }
            }

        .list> div {
                    background-color: #4caf50;
                    width: 3px;
                    height: 18px;
                    border-radius: 2px;
                    -webkit-animation-fill-mode: both;
                    animation-fill-mode: both;
                    display: inline-block;
                    -webkit-animation: list 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
                    animation: list 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
            }
        .list> div:nth-child(1), .list> div:nth-child(2) {
                    -webkit-animation-delay: 0.2s !important;
                    animation-delay: 0.2s !important; 
                }
        .list> div:nth-child(3), .list> div:nth-child(4) {
                -webkit-animation-delay: 0.4s !important;
                    animation-delay: 0.4s !important; 
                }

    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box" v-if="voicevisibility">
            <div class="main">
            <div class="list">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
        </div>		      
        <nav-top-bar :golink="backLink" linktitle="口语练习"></nav-top-bar>
        <audio id="audio" class="hide" :src="audioPlayer.src"></audio>
        <div class="zhuanti-video">
            <!-- <img src="img/index/icon_bofang.png" class="bofang-icon" /> -->
            <video v-on:timeupdate="timeupdate" v-on:canplay="canplay" poster="coverUrl" x5-playsinline="" playsinline=""
                x-webkit-airplay="allow" style="object-fit: fill" id="video" controls preload="auto" width="100%"
                :src="videoUrl"></video>
        </div>
        <div class="kouyulianxi-wrapper" style="position: initial">
            <div class="kouyulianxi-box1" :style="{fontSize:fontSize,lineHeight:lineHeight}">
                <!-- <div class="kouyu-ying">
					Training for this position will include a knowledge of medical terminology, health law, and
					interpersonal communication skills.
				</div>
				<div class="kouyu-zhong">
					该职位的培训包括掌握医学专业术语，健康法的知识以及人际交往技巧。
				</div> -->

                <div style="height: auto; overflow: scroll; margin-top: 10vw; text-align: center;" id="container">
                    <div class="kouyu-ying">{{content[now]['en']}}</div>
                    <div class="kouyu-zhong">{{content[now]['cn']}}</div>

                    <div v-for="(item,index) in content" :id="'id'+index">
                        <!-- <div class="kouyu-ying" 
							v-bind:style="index == now?'color:red;text-align: center;':'text-align: center;'">
							<span v-for="ii in item.en" @click="checkword(ii)">
								{{ii}}
							</span>
						</div>
							<div v-if="cn" class="kouyu-zhong"
							v-bind:style="index == now?'color:red;text-align: center;':'text-align: center;'">
							{{item.cn}}
						</div> -->
                    </div>
                </div>

                <div class="shangyiju-btn icon-btn" @click="switchSentenceToNext(-1)">
                    <i class="iconfont icon-angle-up"></i>
                </div>
                <div class="xiayiju-btn icon-btn" @click="switchSentenceToNext(1)">
                    <i class="iconfont icon-angle-down"></i>
                </div>
            </div>

            <div class="kouyulianxi-box2" style="position: fixed; bottom: 20px">
                <div class="kouyu-wanchengdu d-f a-c-c j-c-c" v-if="score">
                    <div class="wanchengdu-cell">
                        <span class="fenshu">{{ isNaN( parseInt(score.overall))?0: parseInt(score.overall) }}</span>
                        <em class="danwei">分</em>
                    </div>
                    <div class="wanchengdu-cell">
                        <p class="zhunquedu">准确度 <span>{{ isNaN(parseInt(score.pronunciation))?0:parseInt(score.pronunciation) }}</span></p>
                        <div class="wanchengdu-progress">
                            <span class="progress-box" :style="{width: isNaN(parseInt(score.pronunciation))?0:parseInt(score.pronunciation) + '%'}"></span>
                        </div>
                    </div>
                    <div class="wanchengdu-cell">
                        <p class="zhunquedu">流利度 <span>{{ isNaN(parseInt(score.fluency))?0:parseInt(score.fluency) }}</span></p>
                        <div class="wanchengdu-progress">
                            <span class="progress-box" :style="{width: isNaN(parseInt(score.fluency))?0:parseInt(score.fluency) + '%'}"></span>
                        </div>
                    </div>
                    <div class="wanchengdu-cell">
                        <p class="zhunquedu">完整度 <span>{{ isNaN(parseInt(score.integrity))?0:parseInt(score.integrity) }}</span></p>
                        <div class="wanchengdu-progress">
                            <span class="progress-box" :style="{width: isNaN(parseInt(score.integrity))?0:parseInt(score.integrity) + '%'}"></span>
                        </div>
                    </div>
                </div>
                <div class="kouyu-luyin d-f a-c-c j-c-c">
                    <div class="luyin-wode" @click="playOrigin">
                        原声
                        <img src="img/index/icon_ship_bofangff.png" class="bofang-icon" />
                    </div>
                    <div class="luyin-icon" @touchstart="recordVoice" @touchend="stopRecord"></div>
                    <!-- <img src="img/index/icon_ship_luyin.png" class="luyin-icon"  /> -->
                    <div class="luyin-wode">
                        我的
                        <img :src="myVoicePlaying ? 'img/index/icon_ship_bofanggg.png' : 'img/index/icon_ship_bofangff.png'"
                            class="bofang-icon" @click="playMyVoice" />
                    </div>
                </div>
                <div class="touxuefasheng" @click="switchVoiceList"
                    v-if="voiceBaseInfo.hasOwnProperty(content[now].id)">
                    同学发声:<span>{{ voiceBaseInfo[content[now].id].total }}</span>个<img
                        src="img/index/icon_ship_zhankai.png" class="zhankai-xia" />
                </div>
            </div>
        </div>
        <!-- 同学发声 -->
        <div class="tongxuefasheng" v-if="voiceListShow">
            <div class="pop-mask"></div>
            <div class="tongxuefasheng-cont">
                <div class="touxuefasheng-top">
                    同学发声
                    <img src="img/index/icon_quxiao.png" class="quxiao-icon" @click="switchVoiceList" />
                </div>
                <div class="touxuefasheng-cells">

                    <div class="touxuefasheng-cell d-f a-c-c" v-for="(item,index) in voiceList">
                        <img :src="item.user.avatar_url" class="touxue-toux" />
                        <div class="touxuefasheng-xq">
                            <p class="tongxue-name">{{item.user.nick_name}}</p>
                            <div class="txfs-cell-foot">
                                <span>{{item.update_time}}</span>
                                <!-- <span class="huifu">回复</span> -->
                            </div>
                        </div>
                        <span class="fasheng-icon" :class="{'fasheng-icon-actie':item.voicePlaying}" @click="oppVoicePlay(item)">&nbsp;</span>
                    </div>

                </div>
            </div>
        </div>

        <!-- 通用toast弹窗 -->
        <div class="toast" v-show="toastShow">
            {{toastText}}
        </div>
    </div>
</body>
<script type="text/javascript">
    var router = new VueRouter({
        mode: 'history',
    });
    var vue = new Vue({
        el: '#app',
        router,
        data() {
            return {
                fontSize:"0.32rem",
                lineHeight:"0.42rem",
                id: 0,
                videoUrl: '',
                vttUrl: '',
                coverUrl: '',
                video: {},
                audioPlayer: {
                    src: '',
                    playing: false
                },
                content: {
                    0: { en: '', cn: '' }, //免得初始化报错
                },
                sentenceLink: {},
                sentenceLinkFlip: {},

                videoInstance: {},
                wordContainer: {},
                now: 0,

                begin: 0,
                end: 0,
                isCircle: true,

                userInfo: {},
                voiceBaseInfo: {},
                voiceListQuery: {
                    page: 1,
                    pageSize: 10,
                    videoId: '',
                    sentenceId: ''
                },
                voiceListHasMore: true,
                voiceList: [],

                voiceListShow: false,
                myVoicePlaying: false,

                voiceSrc: '',

                score: null,

                toastText: '',
                toastShow: false,

                backLink: '',
                voicevisibility:false,

                init:false,
            };
        },
        created() {
            this.id = this.$route.query.id;
            this.backLink = '/shipinxuexi.html?id=' + this.id;
            this.getVideoInfo();
            this.getUserInfo()
        },
        mounted() {
            let url = window.location.href;
            axios.get('/mp/open/jssdk').then((res) => {
                let jssdkConfig = res.data.data;
                console.log(jssdkConfig, 'jssdk');
                wx.config(jssdkConfig);
            });
            this.getFont()
        },
        methods: {
            getFont(){
                axios.get("/mp/user/getfont").then(res=>{
                    let base = parseInt(res.data) / 100 ;
                    this.fontSize = base + "rem";
                    this.lineHeight = (base + 0.10) + "rem";
                })
            },

            //未完成
            playMyVoice() {
                const sentenceId = this.content[this.now].id;
                if (!this.voiceBaseInfo.hasOwnProperty(sentenceId)) {
                    return this.toast('暂无录音');
                }
                this.myVoicePlaying = true;
                const data = this.voiceBaseInfo[sentenceId];
                this.playAudio(data.domain + data.myvoice.path, () => {
                    this.myVoicePlaying = false;
                });
            },
            switchVoiceList() {
                this.voiceListShow = !this.voiceListShow
                if (this.voiceListShow) {
                    this.voiceListQuery.page = 1
                    this.voiceList = []
                    this.voiceListHasMore = true
                    this.getVoiceList() //下拉翻页的时候再加载
                }
            },
            getUserInfo() {
                axios.get('mp/wechat_user/getUserInfo').then(res => {
                    this.userInfo = res.data
                })
            },
            recordVoice(e) {
                console.log('aaa')
                this.voicevisibility = true
                e.preventDefault();
                wx.startRecord();
            },
            stopRecord() {
                console.log('bbb')
                let that = this

                that.voicevisibility = false
                wx.stopRecord({
                    success: function (res) {
                        var localId = res.localId;
                        // 回放录音
                        wx.playVoice({
                            localId, //需要播放的音频的本地ID，由stopRecord接口获得
                        });
                        // 录音上传
                        wx.uploadVoice({
                            localId: res.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                var mediaId = res.serverId; // 返回音频的服务器端ID
                                var sentenceId = that.content[that.now]['id']
                                var params = {
                                    mediaId,
                                    videoId: that.id,
                                    sentenceId,
                                    uid: that.userInfo.id
                                }
                                that.toast('正在评分', 0);
                                // 将录音从微信服务器下载到自己的服务器
                                axios.get('/mp/open/downloadVoice', { params }).then((res) => {
                                    // 评分
                                    var params = {
                                        videoId: that.id,
                                        sentenceId,
                                        text: that.content[that.now]['en']
                                    };
                                    axios.post('/mp/video/assess', params).then(res => {
                                        that.toastShow = false;
                                        that.score = res.data;

                                        //更新数据
                                        that.getVoiceBaseInfo()
                                        that.voiceListHasMore = true
                                        that.voiceList = []
                                        that.getVoiceList();

                                    });
                                }).catch(e => {
                                    that.toastShow = false;
                                    alert(JSON.stringify(e));
                                });
                            },
                        });
                    }
                });
            },
            getVoiceBaseInfo() {
                const sentenceId = this.content[this.now].id;
                //if (!this.voiceBaseInfo.hasOwnProperty(sentenceId)) {
                    axios.get('/mp/video/voiceBaseInfo', {
                        params: {
                            videoId: this.id,
                            sentenceId
                        }
                    }).then(res => {
                        this.voiceBaseInfo[sentenceId] = res.data;
                        if (res.data.myvoice.assess) {
                            this.score = res.data.myvoice.assess;
                        }
                        else{
                            this.score = false
                        }
                    })
                //}
            },
            getVoiceList() {
                if (!this.voiceListHasMore) return
                this.voiceListQuery.videoId = this.id
                this.voiceListQuery.sentenceId = this.content[this.now]['id']
                axios.get('/mp/video/voiceList', { params: this.voiceListQuery }).then(res => {
                    if (res.data.length == 0) {
                        this.voiceListHasMore = false
                    }
                    this.voiceList = this.voiceList.concat(res.data)
                    for (item of this.voiceList) {
                        this.$set(item, 'voicePlaying', false);
                    }
                })
            },
            getVideoInfo() {
                axios.post('/mp/video/videoInfo', { id: this.id }).then((res) => {
                    console.log(res, 'vtt');
                    this.videoUrl = res.data.PlayInfoList['PlayInfo'][0]['PlayURL'];
                    this.vttUrl = res.data.subtitle_src;
                    this.coverUrl = res.data.VideoBase['CoverURL'];
                    this.video = res.data.video;
                    console.log(this.video);

                    this.wxshare(res.data.video.title,res.data.video.desc,res.data.video.cover_url);
                    axios
                        .get('/mp/video/getWordScreen', { params: { id: this.id } })
                        .then((res) => {
                            this.content = res.data;

                            let tmp = 0;
                            for (let key in this.content) {
                                this.sentenceLink[tmp] = parseInt(key); //一开始就转 一次性解决
                                this.sentenceLinkFlip[key] = parseInt(tmp);
                                this.content[key]['exact'] = parseFloat(
                                    this.content[key]['start_millisecond']
                                );
                                tmp = key;
                            }
                            console.log(Object.keys(this.content),'keys')
                            this.now = parseInt(Object.keys(this.content)[0]); //防止第一句不是从0秒开始
                            this.updateCircleData();
                            this.getVoiceBaseInfo()
                        });
                });
            },
            switchSentenceToNext(next) {
                this.now = next > 0 ? this.sentenceLink[this.now] : this.sentenceLinkFlip[this.now];
                this.updateCircleData();
                // this.updateScrollPosition()
                this.videoInstance.currentTime =
                    this.now + this.content[this.sentenceLink[this.now]]['exact'];
                console.log(
                    this.now,
                    this.sentenceLink[this.now],
                    this.content[this.sentenceLink[this.now]]
                );
                this.getVoiceBaseInfo()
            },
            updateCircleData() {
                //更新下循环播放需要用到的数据
                console.log(this.now,'now')
                this.begin = this.now + this.content[this.now]['exact'];
                this.end = this.sentenceLink[this.now];
                this.end = this.content[this.end]['exact'] + this.end;
                console.log(this.isCircle, this.begin, this.end, 'circle');
            },
            canplay() {
                this.videoInstance = document.getElementById('video');   
                if(!this.init){
                    this.videoInstance.currentTime =this.now
                    this.init = true
                }  
                this.wordContainer = document.getElementById('container');
            },
            timeupdate() {
                if (this.payCircle()) {
                    return true;
                }
                let now = Math.floor(this.videoInstance.currentTime);
                if (this.content[now]) {
                    this.now = now;
                    let top = document.getElementById('id' + now).offsetTop;
                    this.wordContainer.scrollTop = top - 150;
                }
            },
            payCircle() {
                if (this.isCircle) {
                    if (this.videoInstance.currentTime >= this.end) {
                        this.videoInstance.currentTime = this.begin;
                        this.videoInstance.pause();
                    }
                    return true;
                }
                return false;
            },
            playOrigin() {
                this.videoInstance.play();
            },

            oppVoicePlay(item) {
                item.voicePlaying = true;
                this.playAudio(item.path, () => {
                    item.voicePlaying = false;
                });
            },

            playAudio(url, call) {
                const listenPlay = () => {
                    this.audioPlayer.playing = false;
                    audio.removeEventListener('ended', listenPlay);
                    if (call) {
                        call();
                    }
                };
                const listenLoad = () => {
                    audio.removeEventListener('canplay', listenLoad);
                    audio.play();
                    this.audioPlayer.playing = true;
                };
                if (this.audioPlayer.playing) {
                    listenPlay();
                }
                this.audioPlayer.src = url;
                audio.addEventListener('canplay', listenLoad);
                audio.addEventListener('ended', listenPlay);
                audio.load();
                audio.onloadedmetadata = listenLoad;
            },

            toast(message, time = 3000) {
                this.toastText = message;
                this.toastShow = true;
                if (time > 0) {
                    setTimeout(() => {
                        this.toastShow = false;
                    }, time);
                }
            },

            wxshare(title,desc,coverUrl){
                if(!desc || !desc.length){
                    desc = '这里有最前沿、最全面的医学英语视频！通过欣赏精彩视频，全面提升你的听力水平、口语能力、阅读能力、词汇量、语感，同时提高临床实践能力！ 医生有你，医课学习。'
                }
                desc = desc.replace(/<[^>]*>/g,'')
                desc = desc.replace("&nbsp;",'')
                wx.ready(function () {
                    var obj = {//朋友圈
                        title, // 分享标题
                        desc, // 分享描述
                        imgUrl:coverUrl, // 分享图标
                        fail: function (res) {
                            alert(JSON.stringify(res));
                        }
                    };
                    var obj1 = {//好友
                        title, // 分享标题
                        desc,// 分享描述
                        imgUrl:coverUrl, // 分享图标
                        fail: function (res) {
                            alert(JSON.stringify(res));
                        }
                    };
                     // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
                     wx.onMenuShareTimeline(obj);
                    // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
                    wx.onMenuShareAppMessage(obj1);
                   
                });
            }
        },
    });

</script>

</html>